<template>
    <el-dialog v-model="dialogTableVisible" :title="'编辑'" width="500">
        <el-form ref="ruleFormRef" :rules="rules" label-width="auto" :inline="true" :model="form">
            <el-form-item label="任务状态" prop="label" :label-width="formLabelWidth">
                <el-input v-model="form.label" style="width: 250px" :maxlength="50" placeholder="输入任务状态"
                    autocomplete="off" />
            </el-form-item>
            <el-form-item label="色彩标签" prop="bgColor" :label-width="formLabelWidth">
                <el-input v-model="form.bgColor" style="width: 250px" :maxlength="50" placeholder="输入任务状态"
                    autocomplete="off" />
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import type { ListType } from "@/type/todolist/card"; //引入ts类型定义

import { ref, reactive, watch } from "vue";
import { putItem, } from '../js/goTaskStatus'
const { item } = defineProps({
    item: {
        //新增
        type: Object,
        default: () => {
            return {
                id: '',
                label: '',
                bgColor: '',
            } as ListType
        },
    }
});
const dialogTableVisible = defineModel({ type: Boolean });
watch(dialogTableVisible, () => {
    if (dialogTableVisible.value) {
        form.value = item as ListType
    } else if (dialogTableVisible.value) {
        form.value = {
            id: '',
            label: '',
            bgColor: '',
        } as ListType
    }

})
// console.log(isAbb)
const formLabelWidth = 150;
const form = ref<ListType>({
    id: '',
    label: '',
    bgColor: '',
});


const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules<ListType>>({
    label: [
        { required: true, message: "请输入任务状态", trigger: "blur" },
    ],
    bgColor: [
        { required: true, message: "请输入颜色标签", trigger: "blur" },
    ],
});
import { useCounterStore } from '../stores/counter'
const pinias = useCounterStore()

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let arrs: ListType = JSON.parse(JSON.stringify(form.value));

            let res = await putItem(arrs);
            console.log(res, 1111111)

            // debugger
            pinias.goRefresh(true)
            resetForm(ruleFormRef.value)
        } else {
            console.log("error submit!", fields);
        }
    });
};


const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    form.value = {
        id: '',
        label: '',
        bgColor: '',
    };
    dialogTableVisible.value = false;
    formEl.resetFields();
};
</script>

<style scoped></style>